<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司详情</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3063638_l4t9o8ly6jq.css">
    <link rel="stylesheet" href="../swiper-8.0.7/swiper8/swiper-bundle.min.css">
    <!-- <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/companydetails.css">
</head>

<body>
    <!-- 头部导航栏 -->
    <header class="header">
        <div class="container">
            <!-- 头部品牌logo -->
            <div class="brand">
                <a href="./homepage.html" class="logo">
                    <img src="../imgs/logo.png" alt="" class="logo-img">
                    <h2 class="logo-title">得程</h2>
                </a>
                <div class="recruit">
                    <a href="./homepage.html" class="recruit-txt">进入招聘版</a>
                </div>
            </div>
            <!-- 头部导航栏 -->
            <div class="head-nav">
                <!-- 菜单项 -->
                <ul class="menu">
                    <li class="item"><a href="#" class="item-txt">首页</a></li>
                    <li class="item"><a href="#" class="item-txt">职位</a></li>
                    <li class="item"><a href="#" class="item-txt">公司</a></li>
                </ul>
                <!-- 登录用户信息 -->
                <div class="user-info">
                    <div class="news">
                        <a href="">消息</a>|
                    </div>
                    <div class="resume">
                        <a href="">简历</a>|
                    </div>
                    <div class="deliver">
                        <a href="">投递</a>
                    </div>
                    <!-- 用户信息 -->
                    <div class="user">
                        <div class="user-name">霍美美</div>
                        <ul class="user-menu">
                            <li class="menu-item"><a href="">个人主页</a></li>
                            <li class="menu-item"><a href="">职位收藏</a></li>
                            <li class="menu-item"><a href="">关注公司</a></li>
                            <li class="menu-item"><a href="">账号设置</a></li>
                            <li class="menu-item item-line"></li>
                            <li class="menu-item"><a href="">去招聘版</a></li>
                            <li class="menu-item"><a href="./homepage.html">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!-- 顶部公司概述 -->
    <div class="company-summary-box">
        <div class="container">
            <!-- 左侧公司概述 -->
            <div class="company-content">
                <img src="../imgs/tengxun-logo.png" alt="">
                <div class="company-summary">
                    <div class="summary-title">
                        <div class="title">
                            深圳腾讯科技有限公司
                        </div>
                        <div class="follow">
                            <img src="../imgs/follow-img.png" alt="">
                            <div class="follow-txt">关注</div>
                        </div>
                    </div>
                    <div class="company-tag">
                        <div class="tag-item">已上市</div>|
                        <div class="tag-item">2000人以上</div>|
                        <div class="tag-item">游戏、互联网、区块链</div>
                    </div>
                    <div class="website">
                        <img src="../imgs/link-img.png" alt="">
                        <a href="https://www.tencent.com/zh-cn/index.html" class="link">http://www.tengxun.com</a>
                    </div>
                </div>
            </div>
            <!-- 右侧招聘信息 -->
            <div class="recruit">
                <div class="post">
                    <div class="post-num">325</div>
                    <div class="post-txt">在招职位</div>
                </div>
                <div class="recruit-info">
                    <div class="recruit-num">64</div>
                    <div class="recruit-txt">招聘者人数</div>
                </div>
            </div>
        </div>
    </div>


    <!-- 公司详情-基本信息 -->
    <div class="company-details-box">
        <div class="container">
            <!-- 介绍左侧 -->
            <div class="details-left">
                <!-- 标头 -->
                <div class="details-tab">
                    <a href="" class="tab-item active">基本信息</a>
                    <a href="./recruiting-post.html" class="tab-item">在招职位(325)</a>
                    <a href="./company-dynamics.html" class="tab-item">企业动态</a>
                    <div class="line"></div>
                </div>

                <!-- 公司内容介绍 -->
                <div class="details-content">
                    <!-- 公司信息 -->
                    <div class="company-info">
                        <div class="detail-title">
                            <div class="block"></div>
                            <div class="title">公司简介</div>
                        </div>
                        <div class="info-txt">
                            <div class="txt-item">
                                腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承“一切以用户价值为依归”的经营理念，始终处于稳健发展的状态。
                            </div>
                            <div class="txt-item">
                                腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承“一切以用户价值为依归”的经营理念，始终处于稳健发展的状态。腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户
                            </div>

                            <div class="txt-item">
                                腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承“一切以用户价值为依归”的经营理念，始终处于稳健发展的状态。
                            </div>
                            <div class="txt-item">
                                腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承“一切以用户价值为依归”的经营理念，始终处于稳健发展的状态。腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户
                            </div>
                        </div>
                    </div>
                    <!-- 公司标签 -->
                    <div class="company-label">
                        <div class="label-title">
                            <div class="block"></div>
                            <div class="title">公司标签</div>
                        </div>
                        <ul class="label-content">
                            <li class="labels">五险一金</li>
                            <li class="labels">周末双休</li>
                            <li class="labels">老板nice</li>
                            <li class="labels">扁平管理</li>
                            <li class="labels">年底双薪</li>
                        </ul>
                    </div>
                    <!-- 公司地址 -->
                    <div class="company-address">
                        <div class="address-title">
                            <div class="block"></div>
                            <div class="title">公司地址</div>
                        </div>
                        <!-- 地址详情 -->
                        <div class="address">
                            <div class="address-content">
                                <div class="address-title">
                                    深圳市 南山区
                                </div>
                                <div class="address-txt">
                                    科技园讯美广场2楼联合办公室
                                </div>
                                <a href="" class="address-details">
                                    查看地图详情 >
                                </a>
                            </div>
                            <div class="map">
                                <img src="../imgs/map.png" alt="">
                            </div>
                        </div>
                        <div class="dropdown-address">
                            <div class="active-address">
                                <div class="location-address">深圳市 南山区 科技园讯美广场2楼联合办公室</div>
                                <img src="../imgs/little-down-arrow.png" alt="">
                            </div>
                            <!-- 下拉列表 -->
                            <div class="select-address">
                                <div class="address-list">
                                    <div class="location-address">深圳市 南山区 科技园讯美广场2楼联合办公室</div>
                                    <div class="select">
                                        <div class="selectd"></div>
                                    </div>
                                </div>

                                <div class="address-list">
                                    <div class="location-address">深圳市 南山区 科技园讯美广场2楼联合办公室2</div>
                                    <div class="select"></div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!-- 工商信息 -->
                    <div class="register-info">
                        <div class="register-title">
                            <div class="block"></div>
                            <div class="title">工商信息</div>
                        </div>
                        <div class="register-content">
                            <div class="register-item">
                                <div class="category">工商信息</div>
                                <div class="content">腾讯科技(深圳)有限公司</div>
                            </div>
                            <div class="register-item">
                                <div class="category">成立时间</div>
                                <div class="content">2000-02-24</div>
                            </div>
                            <div class="register-item">
                                <div class="category">注册资本</div>
                                <div class="content">200万元（美元）</div>
                            </div>
                            <div class="register-item">
                                <div class="category">法人代表</div>
                                <div class="content">马化腾</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 介绍右侧 -->
            <div class="details-right">
                <!-- 公司相册 -->
                <div class="company-album">
                    <div class="album-title">
                        <div class="title">公司相册</div>
                        <div class="picture-num"></div>
                    </div>
                    <div class="album">
                        <div #swiperRef="" class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="../imgs/nature-1.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="../imgs/nature-2.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="../imgs/nature-3.jpg" alt=""></div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <!-- 公司产品 -->
                <div class="company-product">
                    <div class="product-title">公司产品</div>
                    <ul class="product">
                        <li class="product-list">
                            <div class="product-content">
                                <i class="iconfont icon-gongzhonghao"></i>
                                <div class="product-txt">
                                    <div class="product-name">微信小程序</div>
                                    <div class="desc ellipsis-1">移动互联网APP，专注于人机交互、协作完成任务</div>
                                </div>
                            </div>
                            <div class="website">
                                <img src="../imgs/link-img.png" alt="">
                                <a href="https://www.tencent.com/zh-cn/index.html"
                                    class="link">http://www.tengxun.com</a>
                            </div>

                        </li>
                        <li class="product-list">
                            <div class="product-content">
                                <i class="iconfont icon-gongzhonghao"></i>
                                <div class="product-txt">
                                    <div class="product-name">微信小程序</div>
                                    <div class="desc ellipsis-1">移动互联网APP，专注于人机交互、协作完成任务</div>
                                </div>
                            </div>
                            <div class="website">
                                <img src="../imgs/link-img.png" alt="">
                                <a href="https://www.tencent.com/zh-cn/index.html"
                                    class="link">http://www.tengxun.com</a>
                            </div>

                        </li>
                        <img src="../imgs/big-right-arrow.png" alt="" class="more">
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部导航栏 -->
    <footer class="footer">
        <div class="container">
            <div class="service">
                <div class="links">
                    <div class="link">
                        <!-- 帮助链接信息 -->
                        <dl class="link-info">
                            <dt class="link-title">关于得程</dt>
                            <dd class="link-item"><a href="#">了解得程</a></dd>
                            <dd class="link-item"><a href="#">得程APP</a></dd>
                            <dd class="link-item"><a href="#">用户协议</a></dd>
                        </dl>
                        <dl class="link-info">
                            <dt class="link-title">帮助与反馈</dt>
                            <dd class="link-item"><a href="#">使用帮助</a></dd>
                            <dd class="link-item"><a href="#">意见反馈</a></dd>
                        </dl>
                        <dl class="link-info">
                            <dt class="link-title">联系我们</dt>
                            <dd class="link-item">4006-345-345</dd>
                            <dd class="link-item">周一至周日 9:00-18:00</dd>
                        </dl>
                    </div>
                    <!-- 图片帮助 -->
                    <div class="contact">
                        <div class="app active">
                            <div class="app-contact">
                                <i class="iconfont icon-app"></i>
                                <div class="txt">下载APP</div>
                            </div>
                            <img src="../imgs/code.png" alt="" class="code">
                        </div>
                        <div class="WeChat">
                            <div class="WeChat-contact">
                                <i class="iconfont icon-gongzhonghao"></i>
                                <div class="txt">关注公众号</div>
                            </div>
                            <img src="../imgs/code.png" alt="" class="code">
                        </div>
                    </div>
                </div>
                <!-- 底部网站信息 -->
                <div class="site-info">
                    <div class="copyright">Copyright©2019 得程</div>
                    <div class="record">备案号：粤ICP备12034550号-1</div>
                    <div class="record-info">
                        <img src="../imgs/record.png" alt="">
                        <div class="record-num">京公网安备11010502032801</div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="../js/jquery.slim.min.js"></script>
    <!-- <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script> -->
    <script src="../swiper-8.0.7/swiper8/swiper-bundle.min.js"></script>

    <script>
        $(function () {
            // 用户信息的显示与隐藏
            $('.user').on('mouseenter mouseleave', function () {
                $(this).find('.user-menu').toggle(1000);
            });

            // 关注按钮的单击效果
            $('.follow').on('click', function () {
                $(this).toggleClass('active');
            });


            // 公司地址信息的显示与隐藏
            $('.active-address').on('click', function () {
                $(this).siblings('.select-address').toggle(1000);
            });
            // 选择地址
            $('.select').on('click', function () {
                //蓝点
                $('.select').empty();
                $(this).append('<div class="selectd"></div>');

                //选择公司显示
                let html = $(this).parent().clone().html();
                // console.log(html);
                html += '<img src="../imgs/little-down-arrow.png" alt="" class="little-down-arrow">';
                $('.active-address').empty().append(html);
            });


            // 显示当前图片数量
            setInterval(function () {
                let html = $('.swiper-pagination').clone().html();
                console.log(html);
                $('.picture-num').empty().append(html);
            }, 500)




            // 底部二维码图片显示
            $('.app-contact').on({
                mouseenter: function () {
                    $(this).parent().addClass("active");
                    $('.WeChat-contact').parent().removeClass("active");
                }
            });
            $('.WeChat-contact').on({
                mouseenter: function () {
                    $(this).parent().addClass("active");
                    $('.app-contact').parent().removeClass("active");
                }
            });
        });

        //右侧公司相册轮播图
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            // 轮播功能
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // Enable debugger
            debugger: true,
        });

    </script>
</body>

</html>